import React, { Component } from "react";
import { View, Text, TouchableOpacity, Image } from "react-native";

import Config from "../../config";
import CommonListPage from "../common/CommonListPage";
import WH_PostItemView from "../workhard/WH_PostItemView";
import SearchItemView from '../home/SearchItemView';
import UserRequestPostAction from "../../actions/user/UserRequestPostAction";
import SizeUtils from "../../common/SizeUtils";
import { DateUtils } from "../../utils/Utils";
import CommonStyles from "../../common/CommonStyles";
import TImage from "../../components/TImage";

const SORT_ARR=[
  {key:'posts',name:'圈子'},
  {key:'news',name:'新闻'},
  {key:'workHard',name:'创新效应'},
];

export default class UserDianzanPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._dataKey = "post_id";
    this.select_index=0;
  }

  _getListViewStyle() {
    return {
      width: SizeUtils.getWindowSize().width,
      height:
        SizeUtils.getWindowSize().height -
        Config.paddingTop -
        SizeUtils.translateDesignHeightToCode(80),
      backgroundColor: "#ffffff00"
    };
  }
  _renderTopView(){
    if(this.props.pageData.routeData.type==='news'){return;}
      return(
          <View>
            <View style={{
              flexDirection:"row",
              borderColor:'#eeeeee',
              borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
              height:SizeUtils.translateDesignHeightToCode(80),
              justifyContent:"space-around",
            }}>
              {SORT_ARR.map((item,index)=> this._getSortButton(item,index) )}
            </View>
          </View>
      )
  }
  _getSortButton(typeData,index) {
    return (
      <TouchableOpacity
        key={typeData.key}
        onPress = {() => {
          if (this.select_index!==index) {
            this.setState({
              t:'d' 
            });
            this.select_index=index;
            this.leave();
            this.doRefresh();
          }
        }}
        style={[{
          borderColor:'#eeeeee',
          flex:1,
          alignItems: 'center',
          justifyContent: 'center',
          borderRightWidth:SizeUtils.translateDesignWidthToCode(3)
        }]}>
          <Text style={[CommonStyles.secondaryText,
              {textAlign:"center",color:index===this.select_index?'#ee3535':'#000',
              fontSize:SizeUtils.translateFontSizeToCode(30),
              backgroundColor:"#00000000", borderWidth:0,}]}>{typeData.name}
          </Text>
      </TouchableOpacity>
    )
  }
  _onRenderItem(data, index) {
    return(<SearchItemView key={index} pageData={this.props.pageData}  data={data} index={index} keyWord="" type={SORT_ARR[this.select_index].key} />);
  }

  _onPressItem = data => {
    if (
      data.content.indexOf("https://mp.weixin.qq.com") === 0 ||
      data.content.indexOf("http://mp.weixin.qq.com") === 0
    ) {
      this.gotoPage(Config.pages.chuangxin_web, {
        url: data.content,
        data: data
      });
    } else {
      this.gotoPage(Config.pages.wh_content, data);
    }
  };

  _onRenderRow(data) {
    return (
      <TouchableOpacity
        onPress={() => {
          this._onPressItem(data);
        }}
        style={{
          flex: 1,
          flexDirection: "row",
          paddingTop: SizeUtils.translateDesignHeightToCode(25),
          paddingBottom: SizeUtils.translateDesignHeightToCode(20),
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#eeeeee",
          paddingLeft: SizeUtils.translateDesignWidthToCode(20),
          paddingRight: SizeUtils.translateDesignWidthToCode(20)
        }}
      >
        {this._renderShowImage(data)}
        <View
          style={{
            flex: 1,
            flexDirection: "column",
            justifyContent: "space-between",
            paddingLeft: SizeUtils.translateDesignWidthToCode(20),
            paddingTop: SizeUtils.translateDesignHeightToCode(10),
            paddingBottom: SizeUtils.translateDesignHeightToCode(0)
          }}
        >
          <Text
            numberOfLines={2}
            style={[
              CommonStyles.primaryText,
              {
                color: "#000",
                marginBottom: SizeUtils.translateDesignHeightToCode(10),
                fontWeight: "bold",
                fontSize: SizeUtils.translateFontSizeToCode(30)
              }
            ]}
          >
            {data.title}
          </Text>
          {this._newsBottomView(data)}
        </View>
      </TouchableOpacity>
    );
  }

  _onRenderFirstItem(data) {
    return (
      <TouchableOpacity
        onPress={() => {
          this._onPressItem(data);
        }}
        style={{
          flex: 1,
          paddingTop: SizeUtils.translateDesignHeightToCode(20),
          paddingBottom: SizeUtils.translateDesignHeightToCode(10),
          paddingLeft: SizeUtils.translateDesignWidthToCode(20),
          borderTopWidth: SizeUtils.translateDesignNumToCode(3),
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#eeeeee",
          paddingRight: SizeUtils.translateDesignWidthToCode(20)
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "column",
            paddingTop: SizeUtils.translateDesignHeightToCode(0),
            paddingBottom: SizeUtils.translateDesignHeightToCode(10)
          }}
        >
          <Text
            numberOfLines={1}
            style={[
              CommonStyles.primaryText,
              {
                marginTop: SizeUtils.translateDesignHeightToCode(10),
                marginBottom: SizeUtils.translateDesignHeightToCode(15),
                fontWeight: "bold",
                color: "#000",
                fontSize: SizeUtils.translateFontSizeToCode(30)
              }
            ]}
          >
            {data.title}
          </Text>
          <View
            style={{ flexDirection: "row", justifyContent: "space-between" }}
          >
            {this._renderShowThreeImage(data)}
            {this._renderShowThreeImage(data)}
            {this._renderShowThreeImage(data)}
          </View>
          {this._newsBottomView(data)}
        </View>
      </TouchableOpacity>
    );
  }

  _getDateSource(data) {
    if (data.source) {
      return data.source;
    }
    return "";
  }

  _getImageSource(data) {
    if (data.image_url) {
      return { uri: data.image_url };
    } else if (
      data.image_urls &&
      data.image_urls &&
      data.image_urls.length > 0
    ) {
      return { uri: data.image_urls[0] };
    } else {
      return { uri: "" };
    }
  }

  _renderShowImage(data) {
    if (
      data.image_url ||
      (data.image_urls && data.image_urls && data.image_urls.length > 0)
    ) {
      return (
        <TImage
          source={this._getImageSource(data)}
          style={{
            width: (750 - 50) / 3,
            height: 150
          }}
          resizeMode={"cover"}
          isMini={true}
        />
      );
    }

    return (
      <View
        style={{
          width:
            (SizeUtils.getWindowSize().width -
              SizeUtils.translateDesignWidthToCode(50)) /
            3,
          height: SizeUtils.translateDesignHeightToCode(150)
        }}
      />
    );
  }

  _renderShowThreeImage(data) {
    if (
      data.image_url ||
      (data.image_urls && data.image_urls && data.image_urls.length > 0)
    ) {
      return (
        <TImage
          source={this._getImageSource(data)}
          style={{
            width: 700 / 3,
            height: 150
          }}
          resizeMode={"cover"}
          isMini={true}
        />
      );
    }
    return (
      <View
        style={{
          width:
            (SizeUtils.getWindowSize().width -
              SizeUtils.translateDesignWidthToCode(50)) /
            3,
          height: SizeUtils.translateDesignHeightToCode(150)
        }}
      />
    );
  }

  _newsBottomView = data => (
    <View
      style={{
        flexDirection: "row",
        paddingTop: SizeUtils.translateDesignHeightToCode(20),
        alignItems: "center"
      }}
    >
      <Text
        style={[
          CommonStyles.secondaryText,
          {
            flex: 1,
            fontSize: SizeUtils.translateFontSizeToCode(24)
          }
        ]}
      >
        {this._getDateSource(data)}
      </Text>
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <TImage
          source={require("../../../resource/images/home/zan.png")}
          style={{ width: 34, height: 34 }}
        />
        <Text
          style={[
            CommonStyles.secondaryText,
            { fontSize: SizeUtils.translateFontSizeToCode(24) }
          ]}
        >
          {" " + data.likers_num}
        </Text>
        <TImage
          source={require("../../../resource/images/home/kan.png")}
          style={{ marginLeft: 10, width: 34, height: 34 }}
        />
        <Text
          style={[
            CommonStyles.secondaryText,
            { fontSize: SizeUtils.translateFontSizeToCode(24) }
          ]}
        >
          {" " + data.readers_num}
        </Text>
        <Text
          style={[
            CommonStyles.secondaryText,
            { marginLeft: 10, fontSize: SizeUtils.translateFontSizeToCode(24) }
          ]}
        >
          {DateUtils.formatDiffFromServerTime(data.posted_at)}
        </Text>
      </View>
    </View>
  );

  _requestData(page, listView) {
    const type = SORT_ARR[this.select_index].key;
    new UserRequestPostAction().call(listView, {
      type: "dianzan",
      keyword:type,
      page: page,
      page_size: 10
    });
  }
}
